<!--
 * @Descripttion: 首页
 * @Author: zzt
 * @Date: 2021-09-15 10:37:28
 * @LastEditors: zzt
 * @LastEditTime: 2021-09-29 09:38:43
-->
<template>
    <div class="com-main">
        <el-row :gutter="40">
            <el-col :span="6">
                <div class="panle-label">
                    <div>红包余额</div>
                    <div class="flex jus-b mt20">
                        <div>
                            <div class="fs24">￥{{userInfo.money | price}}</div>
                            <div class="fs12 c999 mt15">累计消费：￥{{userInfo.total_money | price}}</div>
                        </div>
                        <div>
                            <div><el-button size="mini" class="diy-button" @click="sendPaperDialog=true">发红包</el-button></div>
                            <div class="mt10"><el-button size="mini" class="diy-button" @click="onRecharge">充值</el-button></div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="panle-label">
                    <div>推广人员（人）</div>
                    <div class="mt20 fs24">{{userInfo.total_people |text}}</div>
                    <div class="fs12 c999 mt20">本周会员：{{userInfo.total_people_week |text }}</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="panle-label">
                    <div>业务人员</div>
                    <div class="mt20">姓名：{{salesManInfo.name | text}}</div>
                    <div class="mt25">联系方式：{{salesManInfo.tel | text}}</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="panle-label flex">
                    <div>我的推广码</div>
                    <vue-qr 
                        class="code-img ml30"
                        :text="QRcode" 
                        >
                    </vue-qr> 
                    <div class="mt40 ml15 cp" @click="codeDialog=true">点击查看</div>
                </div>
            </el-col>
        </el-row>
        <!-- tab 表格 -->
        <el-row class="mt30">
            <el-col>
                <el-input
                    v-model.trim="searchTel"
                    placeholder="请输入手机号"
                    size="small"
                    class="search-input"
                ></el-input>
                <el-input
                    v-model.trim="searchNbr"
                    placeholder="请输入订单流水号"
                    size="small"
                    class="search-input ml10"
                ></el-input>
                <el-button size="small" class="fs12 ml15" @click="onSearch">搜索</el-button>
            </el-col>
            <el-col class="mt10">
                <el-table
                    :data="tableData"
                    tooltip-effect="dark"
                    v-loading="loading"
                >
                    <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="100"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="tel"
                        label="手机号"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop
                        label="业务性质"
                        align="center"
                    > 
                        <template slot-scope="scope">
                            <span>{{ scope.row.type=='1'?'分发':scope.row.type=='2'?'充值':'-'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop
                        label="额度"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.amount | price }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="show_nbr"
                        label="订单流水号"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="领取时间"
                        align="center"
                        width="350"
                    >
                    </el-table-column>
                    
                </el-table>
            </el-col>
            <el-col class="mt10 tr">
                <el-pagination
                    v-if="Number(currentPage.total) > currentPage.size &&tableData.length != 0"
                    @current-change="paginationChange"
                    :page-size="currentPage.size"
                    :total="Number(currentPage.total)"
                    :pager-count="5"
                    layout="total, prev, pager, next, jumper"
                >
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog
            title="发红包"
            :visible.sync="sendPaperDialog"
            width="40%"
        >
            <div class="sendPaper-dialog">
                <div class="flex ali-c">
                    <span class="pl20">&nbsp;&nbsp;红包：</span>
                    <button 
                        class="select-btn"
                        v-for="(item,index) in paperBtns"
                        :key="index"
                        :class="{active:index==selectIndex}"
                        @click="selectClick(index,item.value)"
                    >{{item.name}}</button>
                </div>
                <div class="flex ali-c mt15">
                    <span>其他金额：</span>
                    <el-input
                        v-model.trim="giveRedAmount"
                        size="small"
                        style="width:100px"
                        class=" ml10"
                        type="number"
                    ></el-input>
                </div>
                <div class="flex ali-c mt15">
                    <span class="pl15">手机号：</span>
                    <el-input
                        v-model.trim="giveRedTel"
                        size="small"
                        class="search-input ml10"
                    ></el-input>
                </div>
                <div slot="footer" class="dialog-footer sendPaper-footer">
                    <el-button size="small" class="diy-button" @click="onGiveRedSend">确定发送</el-button>
                    <el-button size="small" class="diy-button" @click="sendPaperDialog=false">取消</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog
            title="充值"
            :visible.sync="rechargeDialog"
            width="40%"
        >
            <div class="recharge-dialog">
                <div class="flex ali-c jus-b">
                    <ul class="recharge-list">
                        <li>开户名称：上海米牛网络科技股份有限公司</li>
                        <li>银行卡号：45465466546456464646565</li>
                        <li>开户行支行：上海银行浦东支行</li>
                    </ul>
                    <div class="recharge-name">
                        <div class="mt20">联系人：<span class="fs12">{{salesManInfo.name | text}}</span></div>
                        <div class="mt20">联系方式：<span class="fs12">{{salesManInfo.tel | text}}</span></div>
                    </div>
                </div>
                <div class="mt20">
                    <div>须知：</div>
                    <p class="mt15">1、充值钱务必联系您的业务人，避免充值后无法到账；</p>
                    <p class="mt15">2、如有问题可联系您的业务人员；</p>
                </div>
            </div>
        </el-dialog>
        <el-dialog
            title="推广码"
            :visible.sync="codeDialog"
            width="40%"
        >
            
            <div class="code-dialog" id="qrcodeImg">
                <vue-qr 
                    ref="qrcodeRef"
                    :text="QRcode" 

                >
                </vue-qr>
                <p class="mt10">注册最终领500元红包</p>
            </div>
            <div slot="footer" class="dialog-footer tc">
                <el-button size="mini" class="diy-button" @click="onDownImg">下载</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import VueQr from "vue-qr";
export default {
    name: "index",
    components:{
        VueQr
       
    },
    computed: {
        
    },
    data() {
        return {
            searchTel:"", //搜索手机号
            searchNbr:"", //搜索订单流水号
            tableData:[],
            currentPage: {
                total: 0,
                page: 1,
                size: 10,
            },
            loading:false,
            sendPaperDialog:false,
            rechargeDialog:false,
            codeDialog:false, 
            selectIndex: -1,
            paperBtns:[
                {name:'5元红包',value:'5'},
                {name:'10元红包',value: '10'},
                {name: '20元红包',value: '20'},
                {name: '30元红包',value: '30'},
                {name:'50元红包',value: '50'},
            ], 
            salesManInfo:{  //业务员信息
               id : '',
               name:'',
               tel:''
            }, 
            userInfo:{}, //用户信息
            selectMoney:'',  
            giveRedAmount:"", //赠送金额
            giveRedTel:"", //赠送手机号码   

            QRcode: "",
        };

    },
    methods: {
        onSearch(){
            if(!this.searchTel&&!this.searchNbr){
                this.toast.warning("请输入")
                return false;
            }
            this.currentPage.page = 1;
            this.getRecordList();
        },
        selectClick(index,value){
            this.selectIndex = index;
            this.selectMoney = value;
            // console.log(index,value);
        },
        onGiveRedSend(){
            if(this.selectIndex==-1&&!this.giveRedAmount){
                this.toast.warning("请选择或输入红包金额");
                return false;
            }
            if(!this.giveRedTel){
                this.toast.warning("请输入手机号");
                return false;
            }
            this.giveRed();
        },
        onRecharge(){
            this.toast.info("请前往App购买红包套餐！")
        },
        getHome(){
            let that = this;
            this.request.getHome({}, (res)=> {
                if (res.code == "200") {
                    let resData = res.data;
                    if(resData.salesManInfo){
                        that.salesManInfo = resData.salesManInfo;
                    }
                    that.userInfo = resData.userInfo;
                    that.QRcode = resData.userInfo.invite_url;
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        getRecordList(){
            let that = this;
            let data = {
                show_nbr: this.searchNbr,
                tel: this.searchTel,
                type:'',
                date:[],
                pageNum: this.currentPage.page,
                pageSize: this.currentPage.size,
            };
            this.loading = true;
            this.request.getRecordList(data, (res)=> {
                if (res.code == "200") {
                    that.loading = false;
                    let resData = res.data;
                    that.tableData = resData;
                    that.currentPage.total = res.total;
                    console.log(resData);
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        paginationChange(page) {
            this.currentPage.page = page;
            this.getRecordList();
        },
        giveRed(){
            let that = this;
            let data = {
                amount: this.selectIndex==-1?this.giveRedAmount:this.selectMoney,
                tel: this.giveRedTel
            };
            this.request.giveRed(data, (res)=> {
                if (res.code == "200") {
                    that.toast.success(res.message);
                    that.selectIndex=-1;
                    that.giveRedAmount="";
                    that.giveRedTel="";
                    that.sendPaperDialog = false;
                    that.getHome();
                    that.getRecordList();
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        // 下载base64图片
        onDownImg(){
            let qrImg = document.getElementById("qrcodeImg").getElementsByTagName("img")[0];
            let qrImgSrc = qrImg.src;
            if(!qrImgSrc){
                that.toast.error('下载失败');
                return false;
            }
            this.stringutils.downloadFile(qrImgSrc);
        },
        
        
    },
    created() {
        this.getHome();
        this.getRecordList();
    },
    watch: {
        giveRedAmount:{
            handler(newVal,oldVal){
                if(newVal){
                    this.selectIndex = -1;
                }
            }
        },
        selectIndex:{
            handler(newVal,oldVal){
                if(newVal!=-1){
                    this.giveRedAmount = "";
                }
            }
        }

    },

};
</script>

<style lang="stylus" scoped>
    .com-main
        padding 20px
        .panle-label
            border 1px solid #ddd
            min-height 145px
            font-size 14px
            padding 15px
        .diy-button
            width 100px
            font-size 14px
        .code-img 
            width 110px
            height 110px
            background #eee
    .search-input 
        width 220px
    .code-dialog
        width 300px
        height 330px
        margin 10px auto
        text-align center
        img 
            width 300px
            height 300px
            background #eee
    .recharge-dialog,.sendPaper-dialog
        padding 0 20px 20px 20px
        font-size 14px
        .recharge-list li
            margin-bottom 30px
        .recharge-name
            padding 10px
            width 175px
            height 170px
            border 1px solid #ccc
        .select-btn
            padding 4px 7px
            border 1px solid #ccc
            margin-left 10px
            font-size 12px
            color #999
            cursor pointer
            &.active
                border-color #409EFF
                color #409EFF
        .sendPaper-footer
            margin-top 40px
            padding-left 80px
     
        

</style>